<template>
  <div class="threshold-management">
    <div style="display: flex;justify-content: space-between;margin-bottom: 8px">
      <div style="display:flex;align-items:center;">
        <RadioGroup
          v-model="type"
          type="button"
          button-style="solid"
          @on-change="typeChange"
          style="margin-right: 5px"
        >
          <Radio v-for="item in typeList" :label="item.value" :key="item.value">{{ $t(item.label) }}</Radio>
        </RadioGroup>
        <Select
          :key='selectKey'
          style="width:250px;margin-left:12px;"
          v-model="targetId"
          filterable
          clearable
          ref="select"
          @on-clear="onTargetIdClear"
          @on-change="searchTableDetail"
          @on-open-change="onSelectOpenChange"
        >
          <Option v-for="(option, index) in targetOptions"
                  :value="option.option_value"
                  :label="option.option_text"
                  :key="index"
          >
            <TagShow :list="targetOptions" name="type" :tagName="option.type" :index="index"></TagShow>
            {{option.option_text}}
          </Option>
        </Select>
        <!--告警名称-->
        <Input
          v-model="alarmName"
          @on-change="fetchDetailData"
          style="width:250px;margin-left:12px;"
          clearable
          :placeholder="$t('m_alarmName')"
        />
        <div>
          <span style="margin: 0 10px;">仅展示用户创建</span>
          <i-switch
            v-model="onlyShowCreated"
            true-value="me"
            false-value="all"
            size="default"
            @on-change="fetchDetailData"
          />
        </div>
      </div>
      <div>
        <template v-if="type !== 'endpoint' && targetId">
          <Button
            class="btn-upload"
            @click="exportThreshold"
          >
            <img src="@/styles/icon/DownloadOutlined.png" class="upload-icon" />
            {{ $t('m_export') }}
          </Button>
          <div style="display: inline-block;margin-bottom: 3px;">
            <Upload
              :action="uploadUrl"
              :show-upload-list="false"
              :max-size="1000"
              with-credentials
              :headers="{'Authorization': token}"
              :on-success="uploadSucess"
              :on-error="uploadFailed"
              :before-upload="handleBeforeUpload"
            >
              <Button class="btn-upload">
                <img src="@/styles/icon/UploadOutlined.png" class="upload-icon" />
                {{ $t('m_import') }}
              </Button>
            </Upload>
          </div>
        </template>
      </div>
    </div>
    <div>
      <div v-if="!targetId">
        <Alert type="error">
          <span>{{ $t('m_empty_tip_1') }}</span>
          <span v-if="type === 'service'">{{ $t('m_field_resourceLevel') }}</span>
          <span v-if="type === 'group'">{{ $t('m_field_group') }}</span>
          <span v-if="type === 'endpoint'">{{ $t('m_field_endpoint') }}</span>
        </Alert>
      </div>
      <div v-if="targetId && dataEmptyTip">
        <Alert type="error">
          <span v-if="type === 'service'">{{ $t('m_empty_data_recrisive') }}</span>
          <span v-if="type === 'endpoint'">{{ $t('m_empty_data_endpoint') }}</span>
        </Alert>
      </div>
    </div>
    <div v-show="showTargetManagement" class="table-zone">
      <thresholdDetail
        ref='thresholdDetail'
        :type="type"
        :alarmName="alarmName"
        :onlyShowCreated="onlyShowCreated"
        @feedbackInfo="feedbackInfo"
      >
      </thresholdDetail>
    </div>
  </div>
</template>

<script>
import {isEmpty, debounce, cloneDeep} from 'lodash'
import { getToken, getPlatFormToken } from '@/assets/js/cookies.ts'
import thresholdDetail from './config-detail.vue'
import TagShow from '@/components/Tag-show.vue'
import {baseURL_config} from '@/assets/js/baseURL'
import axios from 'axios'

export const custom_api_enum = [
  {
    alarmStrategyImport: 'post'
  },
  {
    alarmStrategyImport: 'get'
  },
  {
    alarmStrategySearch: 'get'
  }
]

export default {
  name: '',
  data() {
    return {
      token: null,
      type: 'service',
      typeList: [
        {
          label: 'm_field_resourceLevel',
          value: 'service'
        },
        {
          label: 'm_field_group',
          value: 'group'
        },
        {
          label: 'm_field_endpoint',
          value: 'endpoint'
        }
      ],
      targetId: '',
      targetOptions: [],
      showTargetManagement: false,
      thresholdTypes: ['group', 'endpoint', 'service'],
      dataEmptyTip: false,
      getTargetOptionsSearch: '',
      alarmName: '', // 告警名称
      onlyShowCreated: 'all', // me用户创建 all所有
      selectKey: '',
      request: this.$root.$httpRequestEntrance.httpRequestEntrance,
      apiCenter: this.$root.apiCenter,
    }
  },
  computed: {
    uploadUrl() {
      return baseURL_config + `/monitor/api/v2/alarm/strategy/import/${this.type}/${this.targetId}`
    }
  },
  mounted() {
    this.token = this.returnLatestToken()
    this.getTargetOptionsSearch = ''
  },
  beforeDestroy() {
    this.$root.$store.commit('changeTableExtendActive', -1)
  },
  methods: {
    feedbackInfo(val) {
      this.dataEmptyTip = val
    },
    async exportThreshold() {
      this.token = await this.refreshToken()
      const api = `/monitor/api/v2/alarm/strategy/export/${this.type}/${this.targetId}`
      axios({
        method: 'GET',
        url: api,
        headers: {
          Authorization: this.token
        }
      }).then(response => {
        if (response.status < 400) {
          const content = JSON.stringify(response.data)
          const fileName = `threshold_${new Date().format('yyyyMMddhhmmss')}.json`
          const blob = new Blob([content])
          if ('msSaveOrOpenBlob' in navigator){
          // Microsoft Edge and Microsoft Internet Explorer 10-11
            window.navigator.msSaveOrOpenBlob(blob, fileName)
          } else {
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveOrOpenBlob(blob, fileName)
            }
          }
        }
      })
        .catch(() => {
          this.$Message.warning(this.$t('m_tips_failed'))
        })
    },
    uploadSucess(res) {
      if (res.status === 'ERROR') {
        this.$Message.error(res.message)
        return
      }
      this.$Message.success(this.$t('m_tips_success'))
      this.searchTableDetail()
    },
    uploadFailed(file) {
      this.$Message.warning({
        content: file.message,
        duration: 5
      })
    },
    typeChange() {
      this.alarmName = ''
      this.clearTargrt()
      this.selectKey = +new Date() + ''
    },
    getTargetOptions() {
      if (!isEmpty(this.targetOptions)) {
        return
      }
      return new Promise(resolve => {
        const api = `/monitor/api/v2/alarm/strategy/search?type=${this.type}&search=${this.getTargetOptionsSearch}`
        this.request('GET', api, '', responseData => {
          this.targetOptions = cloneDeep(responseData)
          window.targetOptions = this.targetOptions
          resolve(this.targetOptions)
        }, {isNeedloading: false})
      })
    },
    clearTargrt() {
      this.targetOptions = []
      this.targetId = ''
      this.showTargetManagement = false
      this.getTargetOptionsSearch = ''
    },
    searchTableDetail() {
      if (this.targetId) {
        this.alarmName = ''
        this.showTargetManagement = true
        const find = this.targetOptions.find(item => item.option_value === this.targetId)
        this.$refs.thresholdDetail.setMonitorType(find.type)
        this.$refs.thresholdDetail.getDetail(this.targetId)
      }
    },
    // debounceGetTargetOptions: debounce(async function () {
    //   const targetItem = find(this.targetOptions, {
    //     option_value: this.targetId
    //   })
    //   if (targetItem && this.getTargetOptionsSearch !== targetItem.option_text) {
    //     return
    //   }
    //   await this.getTargetOptions()
    // }, 400),
    fetchDetailData: debounce(function () {
      this.$refs.thresholdDetail.getDetail(this.targetId)
    }, 300),
    onTargetIdClear() {
      this.$refs.thresholdDetail.getDetail('')
    },
    async refreshToken() {
      await this.request('GET', '/monitor/api/v1/user/role/list?page=1&size=1', '')
      const token = this.returnLatestToken()
      return new Promise(resolve => {
        resolve(token)
      })
    },
    returnLatestToken() {
      return (window.Request ? 'Bearer ' + getPlatFormToken() : getToken()) || null
    },
    async handleBeforeUpload() {
      this.token = await this.refreshToken()
      return true
    },
    onSelectOpenChange(open) {
      if (open) {
        this.getTargetOptions()
      }
    }
  },
  components: {
    TagShow,
    thresholdDetail
  },
}
</script>
<style lang="less">
.threshold-management {
  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    background: #5384FF;
    color: #fff;
  }
}
</style>
<style scoped lang="less">
  .is-danger {
    color: red;
    margin-bottom: 0px;
  }
  .search-input {
    height: 32px;
    padding: 4px 7px;
    font-size: 12px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    width: 230px;
  }

  .section-table-tip {
    margin: 24px 20px 0;
  }
  .search-input:focus {
    outline: 0;
    border-color: #57a3f3;
  }

  .search-input-content {
    display: inline-block;
    vertical-align: middle;
  }
  .tag-width {
    cursor: auto;
    width: 55px;
    text-align: center;
  }
  .btn-img {
    width: 16px;
    vertical-align: middle;
  }
  .btn-left {
    margin-left: 8px;
  }

  .table-zone {
    overflow-y: auto;
    height: ~"calc(100vh - 180px)";
  }
</style>
